<template>
  <view class="container">
    <view class="alltitle"> {{ $t('personal_info') }}: </view>
    <view class="content">
      <view class="content-one d-rn d-ac d-jb">
        <text>{{ $t('avatar') }}</text>
        <!-- <uploadFace v-model="info.avatar"></uploadFace> -->
		<u-avatar :src="info.avatar"></u-avatar>
      </view>
      <view class="content-one d-rn d-ac d-jb">
        <text>{{ $t('zhName') }}</text>
        <input type="text" v-model="info.chineseName" disabled />
      </view>
      <view class="content-one d-rn d-ac d-jb">
        <text>{$t('enName')}</text>
        <input type="text" v-model="info.englishName" disabled />
      </view>
      <view class="content-one d-rn d-ac d-jb">
        <text>{{ $t('phone_number') }}</text>
        <input type="text" v-model="info.phone" disabled />
      </view>
      <!-- <view class="content-one d-rn d-ac d-jb">
				<text>性别</text>
				<text  @click="handleShowS">{{sexName}}</text>
			</view> -->
      <!-- <view class="content-one d-rn d-ac d-jb">
				<text>公司</text>
				<text>深圳科兴信息技术有限公司</text>
			</view> -->
      <!-- <view class="content-one d-rn d-ac d-jb">
				<text>部门</text>
				<input type="text" v-model="info.deptName" disabled>
			</view> -->
      <!-- <view class="content-one d-rn d-ac d-jb" >
				<text>职位</text>
				<text @click="handleShowZ">{{zhiweiname||'请选择'}}</text>
			</view> -->
      <view class="content-one d-rn d-ac d-jb">
        <text>{{ $t('home_phone_number') }}</text>
        <input type="number" :placeholder="$t('please_enter')" v-model="info.phoneHome" />
      </view>
      <!-- <view class="content-one d-rn d-ac d-jb">
				<text>邮箱地址</text>
				<input type="text" v-model="info.electronicMail">
			</view> -->
      <view class="content-one d-rn d-ac d-jb">
        <text>{{$t('home_address') }}</text>
        <input
          type="text"
          :placeholder="$t('please_enter')"
          v-model="info.addressResidential"
        />
      </view>
      <view class="content-one d-rn d-ac d-jb">
        <text>{{ $t('marital_status') }}</text>
        <picker
          @change="changeMarital"
          :range="maritalOptions"
          range-key="dictLabel"
          class="picker"
        >
          <view class="picker-block">
            <view>{{
              maritalOptions[maritalIndex]
                ? maritalOptions[maritalIndex].dictLabel
                : $t('select')
            }}</view>
            <image class="right-icon" src="../../static/img/right.png"></image>
          </view>
        </picker>
        <!-- <view class="" style="padding-top: 10rpx;box-sizing: border-box;">
					<u-radio-group v-model="info.maritalStatus" placement="row">
						<u-radio :customStyle="{marginRight: '10px'}" v-for="(item, index) in maritalOptions" :key="index"
							:label="item.dictLabel" :name="item.dictValue" activeColor="#ffd03d">
						</u-radio>
					</u-radio-group>
				</view> -->
      </view>
    </view>
    <view class="alltitle" style="margin-top: 30rpx"> {{ $t('emergency_contact_name') }}: </view>
    <view class="content">
      <view class="content-one d-rn d-ac d-jb">
        <text>{{ $t('name') }}</text>
        <input
          type="text"
          :placeholder="$t('please_enter')"
          v-model="info.emergencyContactName"
        />
      </view>
      <view class="content-one d-rn d-ac d-jb">
        <text>{{ $t('relationship') }}</text>
        <input
          type="text"
          :placeholder="$t('please_enter')"
          v-model="info.emergencyContactRelation"
        />
      </view>
      <view class="content-one d-rn d-ac d-jb">
        <text>{{ $t('phone_number') }}</text>
        <input
          type="text"
          :placeholder="$t('please_enter')"
          v-model="info.emergencyContactPhone"
        />
      </view>
    </view>
    <view class="alltitle" style="margin-top: 30rpx"> {{$t('bank_info')}}: </view>
    <view
      class="content"
      style="padding-bottom: 200rpx; box-sizing: border-box"
    >
      <view class="content-one d-rn d-ac d-jb">
        <text>{{ $t('bank_account_number') }}</text>
        <input
          type="text"
          :placeholder="$t('please_enter')"
          v-model="info.bankDTOList[0].bankAccount"
        />
      </view>
      <view class="content-one d-rn d-ac d-jb">
        <text>{{ $t('户口持有人') }}</text>
        <input
          type="text"
          :placeholder="$t('please_enter')"
          v-model="info.bankDTOList[0].accountHolder"
        />
      </view>
      <view class="content-one d-rn d-ac d-jb">
        <text>{{ $t('bank_code') }}</text>
        <input
          type="text"
          :placeholder="$t('please_enter')"
          v-model="info.bankDTOList[0].bankCode"
        />
      </view>
      <view class="content-one d-rn d-ac d-jb">
        <text>{{ $t('branch_code') }}</text>
        <input
          type="text"
          :placeholder="$t('please_enter')"
          v-model="info.bankDTOList[0].branchCode"
        />
      </view>
      <view class="content-one d-rn d-ac d-jb">
        <text>{{ $t('bank_name') }}</text>
        <input
          type="text"
          :placeholder="$t('please_enter')"
          v-model="info.bankDTOList[0].openingBank"
        />
      </view>
      <view class="content-one d-rn d-ac d-jb">
        <text>{{ $t('is_preset_holder') }}</text>
        <view class="" style="padding-top: 10rpx; box-sizing: border-box">
          <u-radio-group
            v-model="info.bankDTOList[0].defaultAccount"
            placement="row"
          >
            <u-radio
              :customStyle="{ marginRight: '10px' }"
              v-for="(item, index) in yesOrNoOptions"
              :key="index"
              :label="item.dictLabel"
              :name="item.dictValue"
              activeColor="#ffd03d"
            >
            </u-radio>
          </u-radio-group>
        </view>
      </view>
    </view>

    <!-- 职位 -->
    <!-- <view class="">
			<u-picker :show="showZhi" :columns="zhiList" keyName="positionName" @confirm="zhiconfirm"
				@cancel="zhicancel"></u-picker>
		</view> -->

    <view class="footer d-rn d-ac d-jc" @click="handleSubmit">
      <text class="d-rn d-ac d-jc">{{ $t('Save') }}</text>
    </view>
  </view>
</template>

<script>
import { updateUserInfo } from "@/api/mine.js";
import uploadFace from "@/components/upload/face.vue";
export default {
  components: {
    uploadFace,
  },
  data() {
    return {
      info: {},
      // zhiweiname: '',
      // showZhi: false,
      // zhiList: [],
      // showsex: false,
      // showhun: false,
      // hunName: '',
      // sexName: '',
      // hunName: '',
      maritalIndex: null,
      maritalOptions: [],
      yesOrNoOptions: [],
    };
  },
  onLoad() {
    this.$store.dispatch("actionGetUserInfo");
    this.info = JSON.parse(JSON.stringify(this.userInfo));
    if (!this.info.bankDTOList || !this.info.bankDTOList[0]) {
      this.info.bankDTOList = [{}];
    }
    this.getOptions();
  },
  methods: {
    async getOptions() {
      this.yesOrNoOptions = await this.getDictionaryData("yes_or_no");
      this.maritalOptions = await this.getDictionaryData(
        "leave_marital_status"
      );
      this.maritalIndex = this.maritalOptions.findIndex((item) => {
        return item.dictValue == this.info.maritalStatus;
      });
    },
    // handleShowZ() {
    // 	this.showZhi = true
    // },
    // zhiconfirm(e) {
    // 	this.zhiweiname = e.value[0].positionName
    // 	this.info.position = e.value[0].id
    // 	this.showZhi = false
    // },
    // zhicancel() {
    // 	this.showZhi = false
    // 	this.showsex = false
    // 	this.showhun = false
    // },
    // handleShowH() {
    // 	this.showhun = true
    // },

    // handleShowS() {
    // 	this.showsex = true
    // },
    // sexconfirm(e) {
    // 	this.sexName = e.value[0].name
    // 	// this.info.sex = e.value[0].id
    // 	this.showsex = false
    // },
    // hunconfirm(e) {
    // 	this.hunName = e.value[0].name
    // 	this.showhun = false
    // },
    // getpositionLists() {
    // 	this.zhiList = []
    // 	positionLists().then(res => {
    // 		if (res.code == 200) {
    // 			this.zhiList.push(res.rows)
    // 			res.rows.forEach(item => {
    // 				if (item.id == this.info.id) {
    // 					this.zhiweiname = item.positionName
    // 				}
    // 			})
    // 		}
    // 	})
    // },
    // personalCenter() {
    // 	personalCenter().then(res => {
    // 		this.info = res.data
    // 		if (this.info.maritalStatus == 2) {
    // 			this.hunName = '已婚'
    // 		}
    // 		if (this.info.maritalStatus == 3) {
    // 			this.hunName = '未婚'
    // 		}
    // 		if (this.info.maritalStatus == 4) {
    // 			this.hunName = '离异'
    // 		}
    // 		this.getpositionLists()
    // 	})
    // },
    changeMarital(e) {
      this.maritalIndex = e.detail.value;
      this.info.maritalStatus =
        this.maritalOptions[this.maritalIndex].dictValue;
    },
    handleSubmit() {
      let changeInfo = {},
        changeBack = {};
      for (let i in this.info) {
        if (i == "bankDTOList") {
          const bankInfo = this.info.bankDTOList[0];
          const oldBackInfo = this.userInfo.bankDTOList[0];
          for (let key in bankInfo) {
            if (bankInfo[key] != oldBackInfo[key]) {
              changeBack[key] = bankInfo[key];
            }
          }
        } else {
          if (this.info[i] != this.userInfo[i]) {
            changeInfo[i] = this.info[i];
          }
        }
      }
      if (Object.keys(changeBack).length == 0) {
        changeInfo.bankVOList = null;
      } else {
        changeInfo.bankVOList = [];
        changeInfo.bankVOList[0] = {
          ...changeBack,
          id: this.info.bankDTOList[0].id,
        };
      }
      updateUserInfo(changeInfo).then((res) => {
        uni.showModal({
          title: this.$t('prompt'),
          content: this.$t('submit_success'),
          confirmColor: "#FDC41F",
          showCancel: false,
          success: (t) => {
            if (t.confirm) {
              this.goLink("/pages/mine/index", "switch");
            }
          },
        });
      });
    },
  },
};
</script>

<style lang="scss">
.container {
  width: 100%;

  .footer {
    width: 100%;
    height: 134rpx;
    background-color: #ffffff;
    position: fixed;
    bottom: 0%;
    left: 0%;

    text {
      width: 702rpx;
      height: 86rpx;
      background: #fed72e;
      border-radius: 43px;
      box-shadow: 0px 4px 8px 0px rgba(250, 222, 78, 0.5);
    }
  }

  .alltitle {
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 36rpx;
  }

  .content {
    background-color: #ffffff;

    &-one {
      padding: 24rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #eeeeee;

      text:nth-of-type(1) {
        font-size: 30rpx;
        color: #333333;
      }

      text:nth-of-type(2) {
        font-size: 30rpx;
        color: #999990;
        text-align: right;
      }

      input {
        font-size: 30rpx;
        color: #999990;
        text-align: right;
      }
    }

    .picker-block {
      display: flex;
      align-items: center;
      color: grey;
      font-size: 30rpx;

      .right-icon {
        width: 32rpx;
        height: 32rpx;
        margin-left: 6px;
      }
    }
  }
}
</style>
